<template>
  <div class="jupyter-iframe-box">
    <div class="header">
      <span>
        {{currentTask.projectName}}的调试
        <span class="task-config" v-if="curTaskConfigTaskRole">
          {{curTaskConfigTaskRole.gpuNumber}}个{{curTaskConfigTaskRole.gpuType}}、{{curTaskConfigTaskRole.cpuNumber}}核CPU、{{curTaskConfigTaskRole.cpuNumber/1024}}G内存、{{curTaskConfigTaskRole.shmMB}}M共享内存
        </span>
      </span>
      <el-button @click="stopTask">终止</el-button>
    </div>
    <iframe class="jupyter-iframe" :src="jupyterUrl"></iframe>
  </div>
</template>

<script>
import { getProjectDetail, taskOperation, getUserTaskDetail } from '@/api/project'
export default {
  data () {
    return {
      jupyterUrl: '',
      currentTask: {},
      taskRoles: [],
      curTaskConfigTaskRole: ''
    }
  },
  methods: {
    // 停止任务
    stopTask () {
      this.$confirm('此操作将停止调试任务且不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._taskOperation(2)
      })
    },
    beforeUnloadHandler () {
      this.$confirm('关闭窗口后,当前调试任务将会停止 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._taskOperation(2)
      })
    },
    // 任务操作
    _taskOperation (type) {
      let para = `?jobId=${this.currentTask.id}&operateType=${type}`
      taskOperation(para).then(res => {
        if (res.message.code === 0) {
          if (type === 2) {
            window.close()
          } else {
            return false
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 查询任务
    _getProjectDetail (state) {
      const para = `?cp=1&ps=1000&projectId=${this.$route.query.projectid}`
      getProjectDetail(para).then(res => {
        if (res.message.code === 0) {
          res.data.list.map(item => {
            if (item.jobType === 2 && item.state === 'RUNNING') {
              this._getUserTaskDetail(item.id)
            }
          })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 查询任务详情
    _getUserTaskDetail (id) {
      let para = `?jobId=${id}`
      getUserTaskDetail(para).then(res => {
        if (res.message.code === 0) {
          this.currentTask = res.data
          const cfg = JSON.parse(this.currentTask.config)
          this.curTaskConfigTaskRole = cfg.taskRoles[0]
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  },
  mounted () {
    // window.addEventListener('beforeunload', e => {
    //   debugger
    // })
    const localHref = window.location.origin
    const protocol = this.$route.query.path.indexOf('http') === -1 ? 'http://' : ''
    this.jupyterUrl = localHref + '/jupyter?url=' + protocol + encodeURI(this.$route.query.path)
    // this.jupyterUrl = localHref + '/jupyter?url=https://202.38.95.226:14024/lab?token=1ec4901aee94a79566055ca4da5879af03931215946bfd7f'
    // this.jupyterUrl = this.$route.query.path.indexOf('https') === -1 ? 'https://' + this.$route.query.path : this.$route.query.path
    this._getProjectDetail()
    const userAgent = navigator.userAgent
    const isOpera = userAgent.indexOf('Opera') > -1
    const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera
    const isIE11 = userAgent.indexOf('rv:11.0') > -1
    const isEdge = userAgent.indexOf('Edge') > -1 && !isIE
    if (!isIE && !isEdge && !isIE11) {
      // let beforeUnloadTime = 0
      // let gapTime = 0
      // let isFireFox = navigator.userAgent.indexOf('Firefox') > -1
      window.onunload = function () {
        // gapTime = new Date().getTime() - beforeUnloadTime
        this.stopTask()
      }
    }
  },
  destroyed () {
    window.removeEventListener('beforeunload', e => this.beforeUnloadHandler(e))
  }
}
</script>

<style lang="stylus" scoped>
.jupyter-iframe-box
  width 100%
  height 100%
  .header
    background #f4f7f8
    height 60px
    display flex
    align-items center
    justify-content space-between
    padding 0 20px
    font-weight 600
    font-size 14px
  .task-config
    color #999
    padding-left 30px
    font-size 12px
  .jupyter-iframe
    width 100%
    height calc(100% - 60px)
</style>
